// import React from "react";
// const ThemeContext = React.createContext()
// //Provider 是提供数据，祖先提供数据
// //Consumer是消费数据，后代消费数据
// const {Provider,Consumer} = ThemeContext


// // class  Child extends React.Component{
// //     render(){
// //         console.log(this);
// //         return(
// //             <div>
// //                 <h3>
// //                     子组件：{this.context}
// //                 </h3>
// //             </div>
// //         )
// //     }
// // }
// // Child.contextType = ThemeContext
// class Child extends React.Component{
//     render(){
//         return(
//             <Consumer>
//                 {
//                     (ctx)=>{
//                         console.log(ctx);
//                         return (
//                             <div>
//                                 <h3>子组件：{ctx}</h3>
//                             </div>
//                         )
//                     }
//                 }
//             </Consumer>
//         )
//     }
// }

// function Parent(props){
//     return(
//         <div>
//             <h3>父组件</h3>
//             <Child></Child>
//         </div>
//     )
        
    
// }
// function PageA(){
//     return(
//         <Provider value={110}>
//             <div>
//             <h2>页面</h2>
//             <Parent></Parent>
//         </div>
//         </Provider>
        
//     )
// }
// export default PageA
import React,{useState} from "react";
const ThemeContext = React.createContext()
const {Provider,Consumer} = ThemeContext
class Child extends React.Component{
    render(){
       
        return(
            <Consumer>
                {
                    (ctx)=>{
                        // console.log(ctx);
                        return(
                            <div style={ctx}>
                                <h3>我是后代元素</h3>
                            </div>
                        )
                    }
                }
            </Consumer>
        )
    }
}
function Parent(props){
    return(
        <div>
            <h3>父组件</h3>
            <Child></Child>
        </div>
    )
}

function ThemeToggle({theme,onChange}){
    let change = (e)=>{
        // console.log(123);
        let key = e.target.name
        let val = e.target.value
        // console.log(key);
        console.log(val);
        
        onChange({...theme,[key]:val})
    }
    return(
        <>
        <div>
            前景色: <input type="color" name="color" id=""  value={theme.color} onChange={change}/>
            背景色: <input type="color" name="background" id="" value={theme.background} onChange={change} />
        </div>
        
        </>
    )
}
function PageA(){
    const [theme,setTheme] = useState({color:"#000000",background:"#ffffff"})
    return (
        <Provider value={theme}>
            <div>
                <div>
                    <h2>页面</h2>
                    <Parent></Parent>
                </div>
                <ThemeToggle theme={theme} onChange={e=>{
                    console.log(e);
                    setTheme(e)
                }}></ThemeToggle>
            </div>
        </Provider>
    )
}
export default PageA